<template>
    <n-modal
        v-model:show="showModal"
        class="custom-card"
        preset="card"
        size="huge"
        :style="bodyStyle"
        :segmented="segmented"
        :bordered="false"
    >
        <div>
            <header>{{ }}</header>
            <p>
                <span>共{{ data.total_number }}题，答对{{ data.right_number }}题，答错{{
                        data.wrong_number
                    }}题，分数为：</span>
                <span style="color: #DC132C">{{ data.student_score }}</span>
            </p>
            <n-scrollbar style="max-height: 54vh" trigger="none">
                <div class="topic" v-for="index in data.children">
                    <p class="title">
                        <span>{{ index.number }} .  </span>
                        <span>{{ index.question }}</span>
                    </p>
                    <p class="option">A: {{ index.A }}</p>
                    <p class="option">B: {{ index.B }}</p>
                    <p class="option">C: {{ index.C }}</p>
                    <p class="option">D: {{ index.D }}</p>

                    <p class="answer">学生回答: {{ index.student_answer }}</p>
                </div>
            </n-scrollbar>
        </div>

    </n-modal>
</template>

<script setup>
import workApi from "@/http/workApi";

const segmented = {
    content: "soft",
    footer: "soft"
}
const bodyStyle = {
    width: "80vw",
    height: "80vh"
}
const showModal = ref(false)
const data = ref({
    total_number: null,
    right_number: null,
    wrong_number: null,
    student_score: null,
    children: []
})

function open(training_id, task_id) {

    if (!training_id || !task_id) {
        return
    }
    workApi.get("student/student_task_analysis", {
        params: {
            task_id,
            training_id,
        }
    }).then(r => {
        data.value = r.data
        showModal.value = true
    })
}

defineExpose({
    open
})
</script>

<style scoped lang="less">
.topic {
    margin-bottom: 20px;

    .title {
    }

    .option {
        margin: 3px 18px;
    }

    .answer {
        margin-top: 10px;
    }
}
</style>